<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>问题详情 - 乐考无忧</title>
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="assets/css/bootstrap-icons.css">
    <style>
        body {
            background-color: #f0f9f9;
            padding-bottom: 60px;
        }
        .header {
            padding: 15px;
            background: white;
            position: sticky;
            top: 0;
            z-index: 1000;
        }
        .qa-detail-container {
            padding: 15px;
        }
        .qa-card {
            background: white;
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 15px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }
        .answer-card {
            background: white;
            border-radius: 12px;
            padding: 15px;
            margin-bottom: 15px;
            border-left: 4px solid #eee;
        }
        .answer-card.ai {
            border-left-color: #00b8a9;
        }
        .answer-card.teacher {
            border-left-color: #ff6b6b;
        }
        .answer-card.senior {
            border-left-color: #4d96ff;
        }
        .answer-card.student {
            border-left-color: #ffd93d;
        }
        .role-tag {
            font-size: 0.9rem;
            padding: 2px 8px;
            border-radius: 12px;
            background: #f0f0f0;
        }
        .role-tag.ai {
            color: #00b8a9;
            background: #e6f7f6;
        }
        .role-tag.teacher {
            color: #ff6b6b;
            background: #ffe5e5;
        }
        .role-tag.senior {
            color: #4d96ff;
            background: #e6f0ff;
        }
        .role-tag.student {
            color: #ffa41b;
            background: #fff5e6;
        }
        .answer-content {
            margin: 15px 0;
            line-height: 1.6;
        }
        .answer-actions button {
            color: #666;
        }
        .answer-actions button.active {
            color: #00b8a9;
        }
        .input-wrapper {
            position: relative;
            background: white;
            padding: 15px;
            border-radius: 12px;
            margin: 15px;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
        }
        .input-wrapper textarea {
            padding-right: 40px;
        }
        .input-hint-icon {
            position: absolute;
            right: 25px;
            top: 50%;
            transform: translateY(-50%);
            color: #ccc;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }
        .input-wrapper textarea:focus + .input-hint-icon,
        .input-wrapper textarea:not(:placeholder-shown) + .input-hint-icon {
            opacity: 0;
        }
        .send-btn {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            background: #00b8a9;
            color: white;
            border: none;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: none;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }
        .send-btn:hover {
            background: #009e91;
            transform: translateY(-52%);
        }
        /* 固定回答输入框在底部 */
        .answer-input {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: #f0f9f9;
            padding: 10px 0;
            z-index: 1000;
        }

        /* 问题卡片用户信息样式 */
        .qa-user-info {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 15px;
        }
        
        .qa-user-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
        }

        /* 回复区域样式 */
        .reply-section {
            margin-top: 15px;
            padding-top: 15px;
            border-top: 1px solid #eee;
            display: none;
        }

        .reply-item {
            padding: 10px;
            background: #f8f9fa;
            border-radius: 8px;
            margin-bottom: 10px;
        }

        .reply-input-wrapper {
            display: flex;
            gap: 10px;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <!-- 头部 -->
    <div class="header d-flex align-items-center">
        <a href="qa.html" class="text-dark"><i class="bi bi-chevron-left fs-4"></i></a>
        <h5 class="mb-0 mx-auto">问题详情</h5>
    </div>

    <!-- 问题详情 -->
    <div class="qa-detail-container">
        <!-- 问题卡片 -->
        <div class="qa-card">
            <div class="qa-user-info">
                <img src="images/avatar1.jpg" alt="用户头像" class="qa-user-avatar">
                <div>
                    <div class="fw-bold">张同学</div>
                    <div class="text-muted small">2024考研 | 计算机专业</div>
                </div>
            </div>
            <div class="qa-content">
                2023年英语一真题Text 3中提到的"bleisure travel"具体是什么意思？为什么会出现这种旅行方式？
            </div>
            <div class="qa-image">
                <img src="images/question1.jpg" alt="真题截图" class="img-fluid rounded">
            </div>
        </div>

        <!-- AI回答 -->
        <div class="answer-card ai">
            <div class="d-flex align-items-center gap-2 mb-2">
                <i class="bi bi-robot"></i>
                <span class="role-tag ai">AI助手</span>
                <span class="text-muted small">2小时前</span>
            </div>
            <div class="answer-content">
                "Bleisure travel"是"business"和"leisure"的组合词，指的是将商务出差与休闲旅行结合的一种新型旅行方式。
                <br><br>
                这种方式出现的原因：
                1. 工作方式的改变（远程办公普及）
                2. 年轻一代对工作生活平衡的追求
                3. 公司文化的转变，更注重员工体验
            </div>
            <div class="answer-actions mt-3">
                <button class="btn btn-sm btn-light me-2" onclick="toggleLike(this)">
                    <i class="bi bi-hand-thumbs-up"></i>
                    <span class="like-count">42</span>
                </button>
                <button class="btn btn-sm btn-light" onclick="toggleReply(this)">
                    <i class="bi bi-chat"></i>
                    回复 <span class="reply-count">3</span>
                </button>
            </div>
            <div class="reply-section">
                <div class="reply-list">
                    <div class="reply-item">
                        <div class="d-flex align-items-center gap-2 mb-1">
                            <span class="fw-bold">王同学</span>
                            <span class="text-muted small">1小时前</span>
                        </div>
                        <div>感谢解答，非常清晰！</div>
                    </div>
                    <!-- 更多回复项... -->
                </div>
                <div class="reply-input-wrapper">
                    <input type="text" class="form-control" placeholder="写下你的回复...">
                    <button class="btn btn-primary btn-sm">发送</button>
                </div>
            </div>
        </div>

        <!-- 老师回答 -->
        <div class="answer-card teacher">
            <div class="d-flex align-items-center gap-2 mb-2">
                <i class="bi bi-mortarboard"></i>
                <span class="role-tag teacher">老师</span>
                <span class="text-muted small">1天前</span>
            </div>
            <div class="answer-content">
                补充一点，这种旅行方式在疫情后变得更加普及。企业也开始支持这种模式，因为它可以：
                <ol>
                    <li>提高员工满意度和工作效率</li>
                    <li>降低差旅成本（员工可能会选择更便宜的时间出行）</li>
                    <li>帮助员工更好地了解当地文化，对业务发展有帮助</li>
                </ol>
            </div>
            <div class="answer-actions mt-3">
                <button class="btn btn-sm btn-light me-2" onclick="toggleLike(this)">
                    <i class="bi bi-hand-thumbs-up"></i>
                    <span class="like-count">28</span>
                </button>
                <button class="btn btn-sm btn-light" onclick="toggleReply(this)">
                    <i class="bi bi-chat"></i>
                    回复 <span class="reply-count">2</span>
                </button>
            </div>
            <div class="reply-section">
                <div class="reply-list">
                    <div class="reply-item">
                        <div class="d-flex align-items-center gap-2 mb-1">
                            <span class="fw-bold">李老师</span>
                            <span class="text-muted small">2小时前</span>
                        </div>
                        <div>不客气，很高兴能帮到你！</div>
                    </div>
                    <!-- 更多回复项... -->
                </div>
                <div class="reply-input-wrapper">
                    <input type="text" class="form-control" placeholder="写下你的回复...">
                    <button class="btn btn-primary btn-sm">发送</button>
                </div>
            </div>
        </div>

        <!-- 学长回答 -->
        <div class="answer-card senior">
            <div class="d-flex align-items-center gap-2 mb-2">
                <i class="bi bi-person-check"></i>
                <span class="role-tag senior">学长</span>
                <span class="text-muted small">20小时前</span>
            </div>
            <div class="answer-content">
                这个词在2023年的真题中出现过，建议大家重点记忆。类似的新词还有：
                workation（work + vacation）
                staycation（stay + vacation）
                都反映了当代人工作和生活方式的变化。
            </div>
            <div class="answer-actions mt-3">
                <button class="btn btn-sm btn-light me-2" onclick="toggleLike(this)">
                    <i class="bi bi-hand-thumbs-up"></i>
                    <span class="like-count">15</span>
                </button>
                <button class="btn btn-sm btn-light" onclick="toggleReply(this)">
                    <i class="bi bi-chat"></i>
                    回复 <span class="reply-count">1</span>
                </button>
            </div>
            <div class="reply-section">
                <div class="reply-list">
                    <div class="reply-item">
                        <div class="d-flex align-items-center gap-2 mb-1">
                            <span class="fw-bold">赵学长</span>
                            <span class="text-muted small">1小时前</span>
                        </div>
                        <div>谢谢学长的建议，我会重点记忆的。</div>
                    </div>
                    <!-- 更多回复项... -->
                </div>
                <div class="reply-input-wrapper">
                    <input type="text" class="form-control" placeholder="写下你的回复...">
                    <button class="btn btn-primary btn-sm">发送</button>
                </div>
            </div>
        </div>

        <!-- 同学回答 -->
        <div class="answer-card student">
            <div class="d-flex align-items-center gap-2 mb-2">
                <i class="bi bi-person"></i>
                <span class="role-tag student">同学</span>
                <span class="text-muted small">5小时前</span>
            </div>
            <div class="answer-content">
                谢谢大家的解答！我在复习时发现这个词确实很重要，它体现了社会发展趋势，可能会在作文中用到。
            </div>
            <div class="answer-actions mt-3">
                <button class="btn btn-sm btn-light me-2" onclick="toggleLike(this)">
                    <i class="bi bi-hand-thumbs-up"></i>
                    <span class="like-count">6</span>
                </button>
                <button class="btn btn-sm btn-light" onclick="toggleReply(this)">
                    <i class="bi bi-chat"></i>
                    回复 <span class="reply-count">1</span>
                </button>
            </div>
            <div class="reply-section">
                <div class="reply-list">
                    <div class="reply-item">
                        <div class="d-flex align-items-center gap-2 mb-1">
                            <span class="fw-bold">孙同学</span>
                            <span class="text-muted small">1小时前</span>
                        </div>
                        <div>不客气，很高兴能帮到你！</div>
                    </div>
                    <!-- 更多回复项... -->
                </div>
                <div class="reply-input-wrapper">
                    <input type="text" class="form-control" placeholder="写下你的回复...">
                    <button class="btn btn-primary btn-sm">发送</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 回答输入框 -->
    <div class="answer-input">
        <div class="input-wrapper">
            <textarea class="form-control" rows="1" placeholder="写下你的回答..." 
                      onclick="expandInput(this)" 
                      onblur="collapseInput(this)"></textarea>
            <i class="bi bi-send input-hint-icon"></i>
            <button class="send-btn">
                <i class="bi bi-send"></i>
            </button>
        </div>
    </div>

    <script>
        function expandInput(textarea) {
            textarea.rows = 3;
            const sendBtn = textarea.parentElement.querySelector('.send-btn');
            sendBtn.style.display = 'flex';
        }

        function collapseInput(textarea) {
            if (textarea.value.trim() === '') {
                textarea.rows = 1;
                const sendBtn = textarea.parentElement.querySelector('.send-btn');
                sendBtn.style.display = 'none';
            }
        }

        function toggleLike(btn) {
            const countSpan = btn.querySelector('.like-count');
            const count = parseInt(countSpan.textContent);
            if (btn.classList.contains('active')) {
                countSpan.textContent = count - 1;
                btn.classList.remove('active');
            } else {
                countSpan.textContent = count + 1;
                btn.classList.add('active');
            }
        }

        function toggleReply(btn) {
            const answerCard = btn.closest('.answer-card');
            const replySection = answerCard.querySelector('.reply-section');
            
            // 关闭其他打开的回复区域
            document.querySelectorAll('.reply-section').forEach(section => {
                if (section !== replySection) {
                    section.style.display = 'none';
                }
            });
            
            // 切换当前回复区域
            replySection.style.display = replySection.style.display === 'none' ? 'block' : 'none';
        }
    </script>
</body>
</html>